Money done easy. With Wally.
In October 2020, as part of a 10 month course UX Design, I started designing a digital payment app. This case study is showing all of the work I did over the course of six months.
responsibilities
UX Design, UX Research, UI Design
Jump to result
About wally
With the massive growth in online retail and transactions, people often end up using multiple different apps to manage their financials.
Wally bridges this gap by offering a digital banking app to easily manage money, make and request payments and save across multiple savers.
Problem statement
People don’t want to rely on having to carry their wallet around to make payments. They want to enjoy a smooth and secure payment process via their phone.
Competitive Analysis
To discover working strategies of existing competitors and opportunities to improve upon, two leading digital payment platforms were investigated.
Competitive Analysis PDF
Interviews and Surveys
Qualitative and quantitative research was done through interviews and surveys to identify the problem users were currently experiencing around online payments.
The research data was analysed through affinity mapping.
Meet the users
Based on the research findings, two different user personas were created.
These user personas, Sam and Meghan, were referenced throughout different stages of the design process to build empathy and keep their needs front of mind.
User Personas PDFUser Journeys
User journeys were created based on the Nielsen Norman model. This ensured a user-centric approach was applied. By looking at the different touch points between the user and product over a period of time, user journeys turned out to be a valuable tool to discover new ways of solving the user problem.
User Stories
To break the scope of work into manageable tasks, user stories were created for each of the app’s high-level requirements.
“As a user, I want to move money between different groups so that I can save for particular goals.”
“As a user, I want to set budgets for different categories, so that I am less likely to spend too much.”
“As a user, I want to search for a particular transaction, so that I can split this payment with other people.”
Ideate
User Flows
Once a clear understanding of the user was established, user flows were the first step towards designing a solution. Through user flows, a rough idea of the required screens was developed before continuing to site mapping.
Site Map
A card sort was conducted with potential users to improve the construction of the site map. This brought new insights into the most logical way of grouping elements from a user perspective. This information was taken into account when creating the site map in which the app structure was further laid out.
Prototype
Wireframes
Wireframes were created in different fidelities.
Using pen and paper, low-fidelity wireframes allowed for quick iterations.
Mid-fidelity and high-fidelity wireframes were created in Figma and a high fidelity prototype was used for usability testing.
Test
Usability Testing
Usability testing was conducted with six participants. The test results were analysed through affinity mapping and a rainbow spreadsheet.
Results showed hesitance towards making a saving goal and discomfort around payment reminders due to a lack of personalisation.
Preference testing
Preference testing was conducted to test the visual designs of the budget feature. Results revealed the user’s preferred visualisation, and gave insights into how users interpreted the goal of the budget feature based on each design.
Iterations
Based on these tests, the following iterations were made.
Interactive Prototype
Once iterations were implemented, UI was applied to all screens.
The finalised wireframes were then turned into an interactive prototype.
Result
Payment Requests
Want to request money back from friends? Create a request, send them a link or simply head to a previous transaction and split it with anyone you fancy.
Try payment requests
Savers
No need to save all your money in one place. Create as many savers as you want to keep a clear overview.
Need a little help to save? Set deadlines, create automated deposits or add a lock to your saver to stop yourself from taking money out.
Try savers
Payment Reminders
We all have that one friend who always owes someone money. No need for those awkward conversations anymore.
Go to a specific payment request and simply send them a reminder to pay. You can even add a message to make it more personable.
Try payment reminders
Budget
It’s nice to feel like you actually control your spending habbits. With budgetting you can dedice how much you want to spend and keep track of your behaviour.
Want to get uber organised? Adding categories will do just that for you.
Try budgetUI
Style Guide
A custom style guide was created including logo, colours, UI elements, tone of voice, typography, grids and lay outs and more. Special attention was given to make the app accessible to all audiences, including those with vision and hearing impairments.
Style Guide PDFKey Take-Aways
In hindsight, more time could have been spent referencing user stories throughout each stage of the design process. This would have led to a more comprehensive solution to the user problem. Instead, some features, such as the option to store an ID card digitally, are not included in the first version of the app.
If there is no time or budget for a thorough testing process, even testing a prototype with friends, family members or colleagues can uncover valuable insights on how to improve your prototype before moving onto the next design phase.
I’ve come to realise that, instead of jumping straight onto designing a high fidelity product, I’ve allowed myself much more creativity and saved time by starting with lower fidelity designs and building out from there. It meant I was able to test the designs with users and collect their feedback throughout different stages of the process, while also opening up space for new ideas and opportunities.